<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div v-move class="directive">
        <header>头部</header>
        <div class="conten">内容</div>
    </div>
</template>

<script setup lang="ts">
import { ref, type Directive ,type DirectiveBinding } from 'vue';

const vMove:Directive<any,void> =(el:HTMLElement,bingding:DirectiveBinding)=>{
    let moveElement:HTMLDivElement = el.firstElementChild as HTMLDivElement
    console.log(el,'elelelelelelle');

    const mouseDown =(e:MouseEvent)=>{
        console.log(e,'1111111');
        
        let X = e.clientX -el.offsetLeft
        let Y = e.clientY -el.offsetTop
        const move =(e:MouseEvent)=>{
            // console.log(e,22222);
            if(e.clientY<=10||e.clientX<=10) return
            
            el.style.left = e.clientX - X + 'px'
            el.style.top = e.clientY - Y + 'px'
            
        }


    document.addEventListener('mousemove' , move)
    document.addEventListener('mouseup',()=>{
        document.removeEventListener('mousemove', move)
    })
    }

    moveElement.addEventListener('mousedown', mouseDown)
    
}

</script>

<style scoped>
.directive {
    position: fixed;
}

header {
    width: 200px;
    background-color: rgba(21, 111, 111, 0.428);
    color: #fff;
    cursor: all-scroll;
}

.conten {
    width: 200px;
    height: 200px;
    background-color: rgba(67, 30, 30, 0.204);
}
</style>